<template>
    <h1>边框样式</h1>
    <table class="demo-border">
      <tbody>
        <tr>
          <td class="text">Name</td>
          <td class="text">Thickness</td>
          <td class="line">Demo</td>
        </tr>
        <tr>
          <td class="text">Solid</td>
          <td class="text">1px</td>
          <td class="line">
            <div />
          </td>
        </tr>
        <tr>
          <td class="text">Dashed</td>
          <td class="text">2px</td>
          <td class="line">
            <div class="dashed" />
          </td>
        </tr>
      </tbody>
    </table>
    <h1>圆角</h1>
    <el-row :gutter="12" class="demo-radius">
        <el-col
            v-for="(radius, i) in radiusGroup"
            :key="i"
            :span="6"
            :xs="{ span: 12 }">
            <div class="title">{{ radius.name }}</div>
            <div class="value">
                <code>border-radius: {{ getValue(radius.type) || '0px' }}</code>
            </div>
            <div
                class="radius"
                :style="{
                    borderRadius: radius.type
                        ? `var(--el-border-radius-${radius.type})`
                        : ''}" />
        </el-col>
    </el-row>
    <h1>阴影</h1>
    <div class="flex justify-between items-center flex-wrap">
    <div
        v-for="(shadow, i) in shadowGroup"
        :key="i"
        class="flex flex-col justify-center items-center"
        m="auto"
        w="46">
    <div
        class="inline-flex"
        h="30"
        w="30"
        m="2"
        :style="{
          boxShadow: `var(${getCssVarName(shadow.type)})`,
        }" ></div>
      <span p="y-4" class="demo-shadow-text" text="sm">
        {{ shadow.name }}
      </span>
      <code text="xs">
        {{ getCssVarName(shadow.type) }}
      </code>
    </div>
  </div>
</template>
<script>
export default{
    data(){
        return {
            radiusGroup : [{
                name: 'No Radius',
                type: ''
            },{
                name: 'Small Radius',
                type: 'small'
            },{
                name: 'Large Radius',
                type: 'base'
            },{
                name: 'Round Radius',
                type: 'round'
            }],
            shadowGroup :[{
                name: 'Basic Shadow',
                type: ''
            },{
                name: 'Light Shadow',
                type: 'light'
            },{
                name: 'Lighter Shadow',
                type: 'lighter'
            },
            {
                name: 'Dark Shadow',
                type: 'dark'
            }]
        }
    },
    methods:{
        getValue(type){
            const getCssVarValue = (prefix, type) =>
                getComputedStyle(document.documentElement)
                    .getPropertyValue(`--el-${prefix}-${type}`
            )
            return getCssVarValue('border-radius', type)
        },
        getCssVarName(type){
            return `--el-box-shadow${type ? '-' : ''}${type}`
        }
    }
}
</script>
<style scoped>
.demo-border .text {
    width: 15%;
}
.demo-border .line {
    width: 70%;
}
.demo-border .line div {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--el-border-color);
}
.demo-border .line .dashed {
    border-top: 2px dashed var(--el-border-color);
}

.demo-radius .title {
    color: var(--el-text-color-regular);
    font-size: 18px;
    margin: 10px 0;
}
.demo-radius .value {
    color: var(--el-text-color-primary);
    font-size: 16px;
    margin: 10px 0;
}
.demo-radius .radius {
    height: 40px;
    width: 70%;
    border: 1px solid var(--el-border-color);
    border-radius: 0;
    margin-top: 20px;
}
</style>